import React from 'react';
import { inject, observer } from 'mobx-react';
import { Table, Radio, Icon, Spin } from 'antd';
import { WeaSelect, WeaEchart, WeaLocaleProvider } from 'ecCom';
import { getCurrentHeight } from '../../../util/Util';

const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核执行分析-按组织
 * jiansong 2019/7/3
 */
@inject("gpReportListStore")
@observer
export default class GpReportList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      _height: getCurrentHeight(),
      columns: [
        {
          title: getLabel(33553, '分部'), dataIndex: 'showname', key: 'showname',
          render: (text, record) =>
            <div className="wea-workrelate-table-inlineblock">
              {record.sub ? <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@7tife9@sub${record.id}`} type="home" className="wea-workrelate-table-i" /> : <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@hs23rb@dept${record.id}`} type="folder" className="wea-workrelate-table-i" />}
              <div title={text} className="wea-workrelate-table-mleft" style={{ display: 'inline-block' }}>{text}</div>
            </div>
        }, {
          title: getLabel('508933', '需提交'), width: '14%',
          children: [
            { title: getLabel('508846', '有方案'), dataIndex: 'exist', key: 'exist', width: '7%', },
            { title: getLabel('508779', '无方案'), dataIndex: 'without', key: 'without', width: '7%', }
          ]
        }, {
          title: getLabel('508778', '考核中'), width: '21%',
          children: [
            { title: getLabel('508934', '评分中'), dataIndex: 'scoring', key: 'scoring', width: '7%', },
            { title: getLabel('19134', '审批中'), dataIndex: 'assessing', key: 'assessing', width: '7%', },
            { title: getLabel('236', '退回'), dataIndex: 'back', key: 'back', width: '7%', }
          ]
        }, {
          title: getLabel('23774', '已完成'), dataIndex: 'finish', key: 'finish', width: '14%',
          render: (text) => <div title={text}>{text}</div>
        }, {
          title: getLabel('382750', '已过期'), width: '21%',
          children: [
            { title: getLabel('508934', '评分中'), dataIndex: 'oscoring', key: 'oscoring', width: '7%', },
            { title: getLabel('19134', '审批中'), dataIndex: 'oassessing', key: 'oassessing', width: '7%', },
            { title: getLabel('236', '退回'), dataIndex: 'oback', key: 'oback', width: '7%', }
          ]
        }
      ]
    }
    this.store = this.props.gpReportListStore;
  }

  render() {
    const { tableDataList, year, monthData, yearDatas, month, loading, showCharts, chartOption, selectedRowKeys, onSelectChange } = this.store;
    let { _height, columns } = this.state;

    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qej4il`} spinning={loading}>
        {
          showCharts ?
            <div style={{ width: '100%', height: _height - 100, padding: '10px' }}>
              <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@5wri7q`} ref="chart" option={chartOption} useDefault={false} />
            </div>
            :
            <div className="wea-workrelate-performance-gpreport">
              <div className='year-date'>
                <span>
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@9iizg1`}
                    options={yearDatas}
                    value={year}
                    onChange={(val) => this.yearChange(val)}
                  />
                  <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@zvy5p1`}
                    onChange={(e) => this.monthChange(e.target.value)}
                    defaultValue={String(month)}
                    style={{ verticalAlign: "bottom" }}>
                    {
                      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => {
                        return (<RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@fd0qmj@month${i}`} value={i.toString()}>{monthData[i - 1]}</RadioButton>)
                      })
                    }
                  </RadioGroup>
                </span>
                {/* <span>
                  {titlename}
                </span> */}
              </div>
              <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@tfdxnp`}
                columns={columns}
                bordered={true}
                scroll={{ y: _height - 245 }}
                dataSource={tableDataList}
                className="wea-workrelate-antd-table"
                rowSelection={{
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                }}
                pagination={false} />
            </div>
        }
      </Spin>
    )
  }

  //年份改变
  yearChange(year) {
    this.store.year = year;
    this.store.getGpReportListData();
  };


  //月份改变
  monthChange(month) {
    this.store.month = month;
    this.store.getGpReportListData();
  };

};